	$(function () {
	            $('#hz').highcharts({
				        chart: {
				            type: 'pie',
				            
				            options3d: {
				                enabled: true,
				                alpha: 60
				            }
				        },
				        title: {
				            text: '杭州地区'
				        },
				      
				        plotOptions: {
				            pie: {
				                innerSize: 100,
				                depth: 45,
				                allowPointSelect: true,  
				                cursor: 'pointer',
				                dataLabels:{
				                  enabled:true,
				                  color:'#0ff',
				                  distance:50,
				                  style:{
				                  	fontWeight:'bold',
				                  	fontSize:'18px'
				              
				                  },
				                formmatter: function() {      
						                         return this.y+"%";
						                       }  
				                }
				            }
				        },
				      
				        series: [{
				            name: 'Delivered amount',
				            data: [
				                ['富阳', 8],
				                ['余杭', 3],
				                ['临安', 5],
				                ['淳安', 6],
				                ['桐庐', 4],
				                ['建德', 4], 
				                ['杭州主城区', 4],
				                ['萧山', 4],
				               
				            ]
				        }]
				    }); 		
			    $('#device').highcharts({
			        chart: {
			            type: 'pie',
			            width:350,
				        height:200,
				        margin:20,
			            options3d:{
					               enabled: true,
					               alpha: 45,
					               beta: 0
					              }
			            },
			        colors:[
					          "#0ff",
					          "#ccc"
					        ],
			        title: {
			            text: '杭州地区分布图'
			        },
			        tooltip: {
			            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
			        },
			        plotOptions: {
			            pie: {
			                allowPointSelect: true,
			                cursor: 'pointer',
			                depth: 35,
			                dataLabels: {
			                    enabled: true,
			                    format: '{point.name}'
			                }
			            }
			        },
			        series: [{
			            type: 'pie',
			            name: 'Browser share',
			            data: [
			                {
			                    name: '离线',
			                    y: 4,
			                    sliced: true,
			                    selected: true
			                },
			                ['在线',  6],
			                
			            ]
			        }]
			    });
	/************************center-list********************************/		    
			      var chart = {
						      renderTo: 'container',
						      type: 'column',
						      margin:35,
						      options3d: {
								          enabled: true,
								          alpha: 0,
								          beta: 15,
								          depth: 0,
								          viewDistance: 25
								         }
					         };
				    
				   var  xAxis ={
							   	  gridLineWidth: 1,
							   	  categories:["杭州市区",'萧山','富阳','临安','桐庐','建德'],
							   	  
							   };
				   var  yAxis ={
							   	  gridLineWidth: 1,
							   };
				   var plotOptions = {
								      column: {
										       depth: 25
						                      }
				                     };
				   var series= [{
							      data: [60.8, 71.5, 106.4, 129.2, 102.0, 176.0]
							   }];     
				      
				   var json = {};   
				   json.chart = chart; 
				   json.xAxis = xAxis; 
				   json.yAxis = yAxis;
				   json.series = series;
				   json.plotOptions = plotOptions;
				   var highchart = new Highcharts.Chart(json);
           function showValues() {
							      $('#R0-value').html(highchart.options.chart.options3d.alpha);
							      $('#R1-value').html(highchart.options.chart.options3d.beta);
							   }
			
			   // Activate the sliders
			   $('#R0').on('change', function () {
						      highchart.options.chart.options3d.alpha = this.value;
						      showValues();
						      highchart.redraw(false);
						   });
			   $('#R1').on('change', function () {
						      highchart.options.chart.options3d.beta = this.value;
						      showValues();
						      highchart.redraw(false);
						   });
			
			   showValues();
			 /************************right list************************/  
			   var hgt = new Highcharts.Chart({
			   	       chart: {
						      renderTo: 'container-1',
						      type: 'column',
						      margin:35,
						      options3d: {
								          enabled: true,
								          alpha: 0,
								          beta: 15,
								          depth: 0,
								          viewDistance: 25
								         }
					        },
			   	       xAxis:{
							   gridLineWidth: 1,
							   categories:["杭州市区",'萧山','富阳','临安','桐庐','建德'],	  
							  },
					   yAxis:{
							   	 gridLineWidth: 1,
							   },	
					   plotOptions: {
								      column: {
										       depth: 25
						                      }
				                     },		   
			   	        series:[{
							      data: [80.8, 71.5, 106.4, 129.2, 102.0, 176.0]
							   }]    
			   });
			   function show() {
							      $('#R2-value').html(hgt.options.chart.options3d.alpha);
							      $('#R3-value').html(hgt.options.chart.options3d.beta);
							   }
			
			   // Activate the sliders
			   $('#R2').on('change', function () {
						      hgt.options.chart.options3d.alpha = this.value;
						      showValues();
						      hgt.redraw(false);
						   });
			   $('#R3').on('change', function () {
						      hgt.options.chart.options3d.beta = this.value;
						      showValues();
						      hgtredraw(false);
						   });
			
			   show();
			});
